<template>
  <div>大屏首页</div> 
</template>
<script>
import { queryHYLabelList, getLxList, editLabelList } from "@/api/screen/index";

import IndustrialSignage from "../components/IndustrialSignage.vue";
import BenchmarkCity from "../components/BenchmarkCity.vue";
import IndexPage from "../components/IndexPage.vue";
import IndustryMatrix from "../components/IndustryMatrix.vue";
import Panorama from "../components/Panorama.vue";
import Panorama2 from "../components/Panorama2.vue";
import ArealDistribution from "../components/ArealDistribution.vue";
import TreeAnalysis from "../components/TreeAnalysis.vue";
import IndustrialPortrait from "../components/IndustrialPortrait.vue";
import Specialized from "../components/Specialized.vue";
import GDmap from './GDmap.vue'

export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {
    BenchmarkCity,
    IndustrialSignage,
    IndexPage,
    IndustryMatrix,
    Panorama,
    Panorama2,
    ArealDistribution,
    TreeAnalysis,
    IndustrialPortrait,
    Specialized,
    GDmap
  },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data () {
    return {
      pathValue: "",
      activeTitle: "产业视角",
      // 产业tab
      tabList: [
        {
          title: "产业全景",
        },
        {
          title: "产业图谱",
        },
        {
          title: "产业矩阵",
        },
        {
          title: "产业画像",
        },
        {
          title: "区域分布",
        },
        {
          title: "城市对标",
        },
      ], //
      estateList: [
        {
          title: "产业视角",
        },
        {
          title: "功能视角",
        },
        {
          title: "企业视角",
        },
      ], //产业总览菜单
      editVisible: false, //编辑弹框
      checkboxGroup: [], //看板对比选择
      editTabArr: [], //行业标签列表
      editTabList: [], //看板对比选择结果
      types: [], // 对比行业数据数组
      jumpTitle: "产业总览",
      jumpList: [
        {
          title: "产业总览",
        },
        {
          title: "产业看板",
        },
        {
          title: "电子信息产业",
        },
        {
          title: "装备制造产业",
        },
        {
          title: "生物医药产业",
        },
        {
          title: "先进材料产业",
        },
        {
          title: "新能源汽车产业",
        },
      ],
      selectShow: false,
      cyhxparams2: {},
      showMap: false,
      needFresh: true
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created () {
    // if (this.jumpTitle === "产业看板") {
    //   this.getQueryHYLabelList();
    // }
    this.getQueryHYLabelList();
  },
  mounted () { },
  destroy () { },
  /* 5. Vue方法 */
  methods: {
    branchClick (data, path) {
      console.log(path, "path");
      // this.$refs.IndustrialPortrait.params2 = data;
      this.cyhxparams2 = data;
      if (path) {
        this.pathValue = path;
      }
      this.$nextTick(() => {
        this.activeTitle = "产业画像";
      });
    },
    // 来自产业总览的选择
    toWhere (item, type) {

      console.log(item, "跳转item");
      if (item.value) {
        // '1'代表产业，'2'代表公司
        const type = item.type;
        // 处理path
        const list = item.value.split("->");
        const checkOne = list.pop();
        const specialOne = `<span style="color: yellow">${checkOne}</span>`;
        const path = list.join("->") + "->" + specialOne;
        const jumpTitle = list[0];
        this.jumpTitle = jumpTitle;
        this.activeTitle = "产业图谱";
        const keyObj = {
          1: "cpcc",
          2: "cpmc",
          3: "cpxf",
        };
        let params = {
          params: {
            lx: jumpTitle,
            gsmc: type === "1" ? "" : item.key,
          },
          path: path,
        };
        params.params[keyObj[list.length]] = checkOne;
        this.$nextTick(() => {
          this.$refs.TreeAnalysis.toggle1(params);
        });
      } else {
        console.log(item, type, "typetype");
        if (type == "产业视角") {
          this.jumpTitle = item;
          this.activeTitle = "产业全景";
        } else if (type == "功能视角") {
          if (item == "产业看板") {
            this.selectTwo('产业看板')
          } else {
            console.log(this.jumpTitle,'this.jumpTitlethis.jumpTitle')
            this.jumpTitle = "电子信息产业";
            this.activeTitle = item;
          }
        } else {
          this.jumpTitle = item;
          this.activeTitle = item;
        }
        if (item === "产业图谱") {
          this.$nextTick(() => {
            this.$refs.TreeAnalysis.toggle1({
              path: `<span style="color: yellow">${this.jumpTitle}</span>`,
              params: {
                lx: this.jumpTitle,
              },
            });
          });
        }
      }
    },
    closeMap () {
      this.showMap = false
    },
    //角标颜色动态赋值
    setStyle (color) {
      let obj = {
        borderBottom: "10px solid " + color,
      };
      return obj;
    },
    //  产业看板标签获取
    getQueryHYLabelList () {
      queryHYLabelList().then((res) => {
        console.log(res, "产业看板标签获取");
        if (res.code == 200) {
          this.editTabList = res.rows;
          this.types = res.rows.map((item) => {
            return item.hylx;
          });
        }
      });
    },
    //二级筛选
    selectOne (item, index) {
      // 点击头部产业画像默认全部
      this.cyhxparams2 = {
        name: this.jumpTitle,
      };
      this.pathValue =
        "<span style='color: yellow'>" + this.jumpTitle + "</span>";
      // =============
      this.activeTitle = item.title;
      if (this.activeTitle === "产业图谱" && this.needFresh) {
        this.needFresh = false;
        this.$nextTick(() => {
          this.$refs.TreeAnalysis.toggle({
            path: `<span style="color: yellow">${this.jumpTitle}</span>`,
            params: {
              lx: this.jumpTitle,
            },
          });
        });
      }
      if (this.jumpTitle == "产业总览") {
        this.$refs.IndexPage.Fcheck(item, index);
      }
    },
    // 返回图谱
    goBackTp() {
      this.activeTitle = '产业图谱';
    },
    //一级筛选
    selectTwo (title) {
      console.log(title, "titletitle");
      if (title !== "产业看板" && title !== "产业总览") {
        this.activeTitle = this.activeTitle ? this.activeTitle : "产业全景";
        this.jumpTitle = title;
        if (this.activeTitle == "产业全景") {
          this.$nextTick(() => {
            this.$refs.Panorama2.getInitial();
          });
        }
        this.$nextTick(() => {
          this.selectOne({ title: "产业全景" }, 0);
          console.log(this.activeTitle, "点击了");
        });
      } else {
        this.jumpTitle = title;
        this.activeTitle = "产业视角";
      }
    },
    //handleMouseEnter
    handleMouseEnter () {
      this.selectShow = true;
    },
    //handleMouseLeave
    handleMouseLeave () {
      this.selectShow = false;
    },
    //编辑弹框  选择行业
    editModel () {
      this.editVisible = true;
      this.checkboxGroup = [];
      this.getLxList();
    },
    // 获取标签列表
    getLxList () {
      getLxList().then((res) => {
        if (res.code == 200) {
          this.editTabArr = res.rows;
        }
      });
    },
    // 看板对比 选择
    handleChecked (item) { },
    //  编辑 去对比
    goCompare () {
      if (this.checkboxGroup.length < 2) {
        this.$message.warning(`请至少选择2项进行对比！`);
      } else if (this.checkboxGroup.length > 5) {
        this.$message.warning(`请至多选择5项进行对比！`);
      } else {
        // 去对比
        this.editLabelList();
      }
    },
    // 编辑标签
    editLabelList () {
      editLabelList({
        types: this.checkboxGroup,
      }).then((res) => {
        if (res.code == 200) {
          this.editTabList = res.rows;
          this.types = res.rows.map((item) => {
            return item.hylx;
          });
          this.editVisible = false;
        }
      });
    },
    //  退出登录
    async logout () {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/index";
          });
        })
        .catch(() => { });
    },
    cyqjJump (val) {
      this.activeTitle = val;

      if (val === "产业图谱") {
        this.$nextTick(() => {
          this.$refs.TreeAnalysis.toggle({
            path: `<span style="color: yellow">${this.jumpTitle}</span>`,
            params: {
              lx: this.jumpTitle,
            },
          });
        });
      }
    },
    goMap () {
      this.showMap = true
    }
  },
};
</script>
<style scoped lang="scss">
.el-dropdown-link {
  cursor: pointer;
  font-size: 20px;
  font-family: Alimama FangYuanTi VF;
  font-weight: normal;
  color: #ade2fd;
  font-weight: bold;
  text-align: left;
  // border: 1px solid red;
}

.el-dropdown-menu {
  background-color: #103387 !important;
  border-image: linear-gradient(180deg, #2981ee, #67a4ef) 1 1 !important;
  box-shadow: 0px 1px 16px 0px rgba(0, 1, 4, 0.17) !important;
}

::v-deep .el-dropdown-menu__item {
  // width: 150px !important;
  color: #a5a0a0;
}

::v-deep .popper__arrow::after {
  border-bottom-color: #103387 !important;
}

.el-icon-arrow-down {
  font-size: 16px;
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url("~img/bac.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .screen-top {
    height: 66px;
    // border: 1px solid red;
    // background-image: url("~img/top_bac.png");
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    box-shadow: 0 1px 4px rgba(249, 249, 250, 0.8);
    display: flex;
    align-items: center;
    position: relative;

    .top-left {
      width: 24%;
      font-size: 42px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #e3f5ff;
      padding-left: 45px;
      // border: 1px solid red;
    }

    .top-mid {
      flex: 1;
      display: flex;
      // margin-top: 52px;

      // border: 1px solid red;
      .custom {
        height: 42px;
        cursor: pointer;
      }

      .top-tab {
        cursor: pointer;
        height: 42px;
        width: 22%;
        // border: 1px solid red;
        background-image: url("~img/tab-not.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        font-family: Alimama FangYuanTi VF;
        font-weight: bold;
        color: #326db7;
        position: relative;

        &.active {
          color: #ffffff;
          background-image: url("~img/tab-select.png");
        }

        &.active1 {
          color: #ffffff;
        }

        .triangleUp {
          width: 0px;
          height: 0px;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }

    .top-right {
      width: 18%;
      display: flex;
      height: 60px;
      // border: 1px solid red;
      align-items: center;
      font-size: 24px;
      // font-family: Alimama FangYuanTi VF;
      font-weight: 500;
      color: #ade2fd;
      padding: 0 10px 0 30px;

      .top-right-mid {
        flex: 1;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
      }

      .icon1 {
        width: 35px;
        height: 25px;
        cursor: pointer;
        // margin-right: 30px;
      }

      .line {
        width: 2px;
        height: 40px;
        background: radial-gradient(circle,
            #ade2fd 0%,
            rgba(255, 255, 255, 0.01) 100%);
      }

      .icon2 {
        width: 15px;
        height: 10px;
      }

      .logout {
        width: 36px;
        height: 36px;
        font-weight: 400;
        text-decoration: underline;
        cursor: pointer;
        margin-left: auto;
        // margin-right:15px;
      }
    }

    .select_item {
      position: absolute;
      top: 96px;
      right: 90px;
      z-index: 99;
      width: 170px;
      height: auto;
      background: #103387;
      border-image: linear-gradient(180deg, #2981ee, #67a4ef) 1 1;
      box-shadow: 0px 1px 16px 0px rgba(0, 1, 4, 0.17);

      .class1 {
        width: 90px;
        color: #e4f6ff;
        font-size: 18px;
        height: 22px;
        line-height: 22px;
        margin: 15px auto;
        position: relative;
        cursor: pointer;

        .icon {
          width: 0px;
          height: 0px;
          border-left: 5px solid #ade2fd;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          position: absolute;
          right: 0;
          top: 7px;
        }
      }

      .class2 {
        width: 90px;
        color: #ade2fd;
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        margin: 15px auto;
        position: relative;
        cursor: pointer;

        .icon {
          width: 0px;
          height: 0px;
          border-left: 5px solid #ade2fd;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          position: absolute;
          right: 0;
          top: 7px;
        }
      }
    }

    .edit_model {
      margin-top: 10%;

      .title_area {
        width: 300px;
        height: 40px;
        background-image: url("~img/model_title.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        line-height: 40px;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #d7f4ff;
        text-align: center;
        margin: -75px auto 0 auto;
      }

      .compare {
        height: 300px;
        width: 500px;
        margin: 50px auto 0 auto;

        .el-checkbox-width {
          width: 28%;
          margin-bottom: 20px;
          color: #fff;
        }

        .el-checkbox+.el-checkbox {
          margin-left: 0px;
        }

        .el-checkbox {
          margin-right: 25px;
        }
      }

      .footer {
        width: 100%;
        height: 60px;
        text-align: center;

        .edit_btn {
          width: 140px;
          height: 34px;
          background: linear-gradient(0deg, #2981ee 0%, #135ccf 100%);
          border-radius: 5px 5px 5px 5px;
          border: none;
          color: #d7f4ff;
          margin-top: 13px;
        }
      }
    }

    ::v-deep .el-dialog__header {
      background: #0c276a;
      // box-shadow: 0px 4px 54px 19px rgba(5,22,61,0.19);
      opacity: 0.96;
    }

    ::v-deep .el-dialog__body {
      background: #0c276a;
      // box-shadow: 0px 4px 54px 19px rgba(5,22,61,0.19);
      opacity: 0.96;
    }
  }

  .screen-body {
    height: calc(100% - 96px);
    padding: 50px 96px;
    overflow-y: auto;
  }
}

.map-modal {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}</style>
